@import "./mixins/mixins.scss";
@import "./common/var.scss";

@include b(button-group) {
  display: inline-block;

  .el-button {
    margin-left: 0;
    // border-radius
    &:first-child {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    &:last-child {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    &:not(:first-child):not(:last-child) {
      border-radius: 0;
    }

    // border-color
    &:first-child {
      border-right-color: rgba($color: $--color-white, $alpha: 0.5);
    }
    &:last-child {
      border-left-color: rgba($color: $--color-white, $alpha: 0.5);
    }
    &:not(:first-child):not(:last-child) {
      border-color: rgba($color: $--color-white, $alpha: 0.5);
    }

    // 只有一个元素时
    &:first-child:last-child {
      border-radius: $--button-border-radius;
      &.is-round {
        border-radius: 20px;
      }
      &.is-circle {
        border-radius: 50%;
      }
    }

    &:not(:last-child) {
      margin-right: -1px;
    }
  }
}
